<!--suppress ALL -->
<script lang="ts">
export default {
  name: "OperateMethodCodeMirror"
}
</script>

<template>

  <el-tabs v-model="dataState.activeName" @tab-click="handleClick">

    <el-tab-pane v-if="dataState.formData.operateMode==='exchange' || dataState.formData.operateMode==='publish' "
                 label="编码函数"
                 name="encode">
      <div style="width: 100%; height: 500px; border: 1px solid #f00">
        <Codemirror
          v-model="dataState.encode"
          :autofocus="true"
          :disabled="false"
          :extensions="extensions"
          :style="{ height: '100%' }"
          class="code"
          @blur="handleClick('blur', $event)"
          @change="handleClick('change', $event)"
          @focus="handleClick('focus', $event)"
          @ready="handleClick('ready', $event)"
        />
      </div>
    </el-tab-pane>

    <el-tab-pane v-if="dataState.formData.operateMode==='exchange'
                || dataState.formData.operateMode==='report'
                || dataState.formData.operateMode==='splitHandler'
                || dataState.formData.operateMode==='keyHandler'
                " label="解码函数" name="decode">
      <div style="width: 100%; height: 500px; border: 1px solid #f00">
        <Codemirror
          v-model="dataState.decode"
          :autofocus="true"
          :disabled="false"
          :extensions="extensions"
          :style="{ height: '100%' }"
          class="code"
          @blur="handleClick('blur', $event)"
          @change="handleClick('change', $event)"
          @focus="handleClick('focus', $event)"
          @ready="handleClick('ready', $event)"
        />
      </div>
    </el-tab-pane>

    <el-tab-pane v-if="dataState.formData.operateMode==='include'
                " label="库函数" name="include">
      <div style="width: 100%; height: 500px; border: 1px solid #f00">
        <Codemirror
          v-model="dataState.include"
          :autofocus="true"
          :disabled="false"
          :extensions="extensions"
          :style="{ height: '100%' }"
          class="code"
          @blur="handleClick('blur', $event)"
          @change="handleClick('change', $event)"
          @focus="handleClick('focus', $event)"
          @ready="handleClick('ready', $event)"
        />
      </div>
    </el-tab-pane>

  </el-tabs>

</template>

<script lang="ts" setup>
import {onMounted, reactive, toRefs, ref} from "vue";

import {Codemirror} from 'vue-codemirror'
import {javascript} from '@codemirror/lang-javascript'
import {oneDark} from '@codemirror/theme-one-dark'

import {DeviceOperateItem, ScriptMethod} from "@/api/repo/comp/local/types";

const extensions = [javascript(), oneDark];

const handleClick = (type: string, val: Event) => {
  console.log(type, val);
};


const emit = defineEmits(['update']);// 定义组件的事件通知

/**
 * 对外声明接口：父页面可以调用它
 */
defineExpose({initData});

// 数据状态：定义
let dataState = reactive({
  activeName: '',
  encode: '',
  decode: '',
  include: '',
  // 表单数据
  formData: {} as DeviceOperateItem,
});


/**
 * 刷新表单
 */
function initData(entity: DeviceOperateItem) {
  dataState.formData = entity;
  if (dataState.formData.engineParam.encode !== undefined) {
    dataState.encode = dataState.formData.engineParam.encode?.code;
  }
  if (dataState.formData.engineParam.decode !== undefined) {
    dataState.decode = dataState.formData.engineParam.decode?.code;
  }
  if (dataState.formData.engineParam.include !== undefined) {
    dataState.include = dataState.formData.engineParam.include?.code;
  }

  if (dataState.formData.operateMode === 'exchange') {
    dataState.activeName = 'encode'
  }
  if (dataState.formData.operateMode === 'publish') {
    dataState.activeName = 'encode'
  }
  if (dataState.formData.operateMode === 'report') {
    dataState.activeName = 'decode'
  }
  if (dataState.formData.operateMode === 'splitHandler') {
    dataState.activeName = 'decode'
  }
  if (dataState.formData.operateMode === 'keyHandler') {
    dataState.activeName = 'decode'
  }
  if (dataState.formData.operateMode === 'include') {
    dataState.activeName = 'include'
  }
}

/**
 * 响应页面安装：页面的初始化工作
 */
onMounted(() => {
});

</script>

<style>
.code {
  width: 300px;
  height: 300px;
}
</style>
